<template>
  <div class="medicineAdd">
    <el-page-header @back="goBack" content="添加服务"> </el-page-header>

    <div class="center">
      <div class="medicineAddForm">
        <el-form
          :model="medicineAddForm"
          :rules="rules"
          ref="medicineAddForm"
          label-width="100px"
          class="medicineAdd-form"
        >
          <el-form-item label="服务名称" prop="name">
            <el-input
              v-model="medicineAddForm.name"
              class="drug-name"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片地址" prop="picture">
            <el-input
              v-model="medicineAddForm.picture"
              class="drug-picture"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布人" prop="uploadUser">
            <el-input
              v-model="medicineAddForm.uploadUser"
              class="drug-uploadUser"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务厂家" prop="manufacturer">
            <el-input
                    v-model="medicineAddForm.manufacturer"
                    class="drug-manufacturer"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务规格" prop="standard">
            <el-input
                    v-model="medicineAddForm.standard"
                    class="drug-standard"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属分类" prop="sort">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>

          <el-form-item label="价格（元）" prop="price">
            <el-input
              v-model="medicineAddForm.price"
              type="number"
              class="drug-price"
            ></el-input>
          </el-form-item>

          <el-form-item label="仓库剩余" prop="stock">
            <el-input
              v-model="medicineAddForm.stock"
              type="number"
              class="drug-stock"
            ></el-input>
          </el-form-item>

          <el-form-item label="服务描述" prop="description">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 10 }"
              v-model="medicineAddForm.description"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('medicineAddForm')"
              :disabled="disabled"
              >立即添加</el-button
            >
            <el-button @click="resetForm('medicineAddForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MedicineAdd",
  data() {
    return {
      value: [],
      // 接收传回的分类信息
      options: [],
      disabled: false,
      // 表单填写的信息
      medicineAddForm: {
        name: "",//服务名称
        picture: "",//服务图片
        uploadUser: "",//发布人
        price: "",//价格
        stock: "",//库存
        description: "", //服务描述
        manufacturer:"", //服务厂家
        standard:""//服务规格
      },
      // 校验规则
      rules: {
        name: [
          {
            required: true,
            message: "请填写服务名称！",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
          manufacturer: [
          {
            required: true,
            message: "请填服务厂家！",
            trigger: "blur",
          },
        ],
          standard: [
              {
                  required: true,
                  message: "请填写服务规格！",
                  trigger: "blur",
              },
          ],
          picture: [
              {
                  required: true,
                  message: "请填写上传图片的地址！",
                  trigger: "blur",
              },
          ],
        uploadUser: [
          { required: true, message: "请填写上传者的名字！", trigger: "blur" },
        ],
        price: [
          {
            required: true,
            message: "请填写价格！",
            trigger: "blur",
          },
        ],
        stock: [
          {
            required: true,
            message: "请填写服务库存数量！",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请填写服务描述！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCategoryArr();
  },
  methods: {
    /* 提交表单 */
    submitForm(medicineAddForm) {
      this.$refs[medicineAddForm].validate((valid) => {
        if (valid) {
          const _this = this;
          let medicine = {
            name: "",
            picture: "",
            uploadUser: "",
            sort: "",
            secondSort: "",
            price: "",
            stock: "",
            description: "",
            manufacturer:"", //服务厂家
            standard:""//服务规格
          };
          medicine.name = this.medicineAddForm.name;
          medicine.picture = this.medicineAddForm.picture;
          medicine.uploadUser = this.medicineAddForm.uploadUser;
          medicine.sort = this.value[0];
          medicine.secondSort = this.value[1];
          medicine.price = this.medicineAddForm.price;
          medicine.stock = this.medicineAddForm.stock;
          medicine.description = this.medicineAddForm.description;
            medicine.manufacturer = this.medicineAddForm.manufacturer;
          medicine.standard =this.medicineAddForm.standard;
          this.$axios.post("/medicine/add", medicine).then((res) => {
            _this.disabled = true;
            if (res.data.data.responseBody) {
              // 记录日志
              _this.$axios
                .get("/admin/info/" + _this.$store.getters.getUser.id, {
                  headers: {
                    Authorization: localStorage.getItem("token"),
                  },
                })
                .then((res) => {
                  let user = res.data.data.data;
                  let formData = new FormData();
                  formData.append(
                    "auth",
                    user.auth == 1 ? "超级管理员" : "管理员"
                  );
                  formData.append("admin", user.realName);
                  let doWhat = "添加服务--服务名称：" + medicine.name+"，所属分类："+ this.options[medicine.sort].label;
                  formData.append("doWhat", doWhat);
                  _this.$axios.post("/log/add", formData);
                });
              // 提示信息
              _this.$alert(
                "添加成功! 如果要继续添加，请先点击重置清空信息。",
                "提示",
                {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    _this.resetForm;
                  },
                }
              );
            } else {
              _this.$alert("操作失败！", "提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                  _this.resetForm;
                },
              });
            }
          });
        } else {
          console.log("信息填写有误!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.disabled = false;
      this.value = [];
      this.$refs[formName].resetFields();
    },
    /* 获取分类数组选项 */
    getCategoryArr() {
      this.$axios.post("/admin/category/arr").then((res) => {
        console.log(res);
        this.options = res.data.data.data;
      });
    },
    handleChange(value) {
      console.log("value："+value);
    },
    goBack() {
      console.log("go back");
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.medicineAdd >>> .el-page-header__content {
  color: #606266;
}

@import "./style/MedicineAdd.css";
</style>
